<template>
  <div class="container">
    <el-carousel height="calc(100vh - 59px)">
      <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
        <div :style="{ backgroundImage: `url(${image})` }"></div>
      </el-carousel-item>
    </el-carousel>
    <div class="center gradient-text">惠然肯来</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 使用 ES 模块导入图片
import homeImage1 from "@/assets/home1.jpg";
import homeImage2 from "@/assets/home2.jpg";
import homeImage3 from "@/assets/home3.jpg";
import homeImage4 from "@/assets/home4.jpg";

const carouselImages = ref([homeImage1, homeImage2, homeImage3, homeImage4]);
</script>

<style scoped lang="scss">
.el-carousel__item div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.container {
  position: relative;
}
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100px;
  line-height: 100px;
  font-size: 120px;
  color: white;
  text-align: center;
  font-family: "MyCustomFont2", sans-serif;
}
.gradient-text {
  background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
</style>
